<template>
    <div class="title"  @click="handleclick(props.data)">
        <img :src="props.data.logolinks" />
    </div>
    <!-- <div class="title2" v-else @click="handleclick(props.data)">
        {{ props.data.number }}
    </div> -->
</template>


<script lang="ts" setup>
import { postpv } from '@/api/reqIpo/ipo';
import router from '@/router';
import { ref, onMounted, watch, onUpdated } from 'vue';
interface dataType {
    HKD: string;
    number: string;
    price: string;
    time: string;
    title: string;
    trading: string;
    logolinks: string;
    status: string;
    listingDate: string;
    ipoID: number;
    tradeCurrency: string;
}
const props = defineProps<{ data: dataType }>();
let debounceTimeout1: number | undefined;
const count1 = ref(0)
const handleclick = (item: any) => {
    sessionStorage.setItem('ipoID', item.ipoID);
    sessionStorage.setItem('itemData', JSON.stringify(item));
//     clearTimeout(debounceTimeout1);
//   debounceTimeout1 = setTimeout(() => {
//     console.log('count1',count1.value)
//     count1.value = ++count1.value;
//     postpv({ipoClicks: String(count1.value),ipoId:String(props.data.ipoID)})
// //    fetch ('/api/Statistics/pv', {
// //       method: 'post',
// //       headers: {
// //         'Content-Type': 'application/x-www-form-urlencoded',
// //       },
// //       body: new URLSearchParams({ ipoClicks: String(count1.value),ipoId:String(props.data.ipoID) }),
// //     })
// //     //  .then(response => response.json())
// //      .then(data => console.log(data))
// //      .catch(error => console.error(error));
//   }, 500); 
    router.push({
        name: 'Xdashboard',
        params: { data: JSON.stringify(item) },
    });
};
const isImage = ref(false);
const checkImgExists = (imgurl: string) => {
    try {
        var ImgObj = new Image();
        ImgObj.src = imgurl;
        ImgObj.onload = () => {
            isImage.value = true;
        };
        ImgObj.onerror = () => {
            isImage.value = false;
        };
    } catch (error) {
        console.log('error');
    }
};
// watch(
//     props.data,
//     () => {
//         return checkImgExists(props.data.logolinks);
//     }
// );
// onUpdated(()=>{
//   setTimeout(()=>{
//       checkImgExists(props.data.logolinks)
//   },1000)
// })
// onMounted(()=>{
//     setTimeout(()=>{
//       checkImgExists(props.data.logolinks)
//   },1000)
// })
</script>

<!-- <style lang="scss" scoped>
.title {
    background-color: #fff;
    height: 190px;
    line-height: 140px;
    font-size: 40px;
    color: #fff;
    overflow: hidden;
    font-family: 'Calibri';
    width: 287px;
    border-radius: 20px 20px 0px 0px;
    cursor: pointer;

    img {
        height: 100%;
        width: 100%;
        object-fit: cover;
        // position: absolute;
        // top: 50%;
        // left: 50%;
        // transform: translate(-50%, -50%);
        background-color: #fff;
    }
}
.title2 {
    background-color: #23445a;
    color: #fff;
    height: 190px;
    line-height: 190px;
    font-size: 40px;
    text-align: center;
    width: 285px;
    border-radius: 20px 20px 0px 0px;
    overflow: hidden;
    font-family: 'Calibri';
    position: relative;
    cursor: pointer;
}
</style> -->
<!-- <style lang="scss" scoped>

    .title {
        background-color: #fff;
        height: calc(70vh / var(--height) * 190);
        line-height: calc(70vh / var(--height) * 140);
        font-size: calc(70vh / var(--height) * 40);
        color: #fff;
        overflow: hidden;
        font-family: 'Calibri';
        width: 287px;
        border-radius: calc(81vw / var(--screen) * 20) calc(81vw / var(--screen) * 20) 0px 0px;
        cursor: pointer;

        img {
            height: 100%;
            width: 100%;
            object-fit: cover;
            // position: absolute;
            // top: 50%;
            // left: 50%;
            // transform: translate(-50%, -50%);
            background-color: #fff;
        }
    }
    .title2 {
        background-color: #23445a;
        color: #fff;
        height: calc(70vh / var(--height) * 190);
        line-height: calc(70vh / var(--height) * 190);
        font-size: calc(70vh / var(--height) * 40);
        text-align: center;
        width:  285px;
        border-radius: calc(81vw / var(--screen) * 20) calc(81vw / var(--screen) * 20) 0px 0px;
        overflow: hidden;
        font-family: 'Calibri';
        position: relative;
        cursor: pointer;
    }

</style> -->
<style lang="scss" scoped>
.title {
    background-color: #fff;
    height: 190px;
    line-height: 140px;
    font-size: 40px;
    color: #fff;
    overflow: hidden;
    font-family: 'Calibri';
    width: 287px;
    border-radius: 20px 20px 0px 0px;
    cursor: pointer;

    img {
        height: 100%;
        width: 100%;
        object-fit: cover;
        // position: absolute;
        // top: 50%;
        // left: 50%;
        // transform: translate(-50%, -50%);
        background-color: #fff;
    }
}
.title2 {
    background-color: #23445a;
    color: #fff;
    height: 190px;
    line-height: 190px;
    font-size: 40px;
    text-align: center;
    width: 285px;
    border-radius: 20px 20px 0px 0px;
    overflow: hidden;
    font-family: 'Calibri';
    position: relative;
    cursor: pointer;
}
</style>
<style lang="scss" scoped>
@media (min-width: 768px) and (max-width: 1400px) {
    .title {
        background-color: #fff;
        height: calc(100vw / var(--screen) * 190);
        line-height: calc(100vw / var(--screen) * 140);
        font-size: calc(100vw / var(--screen) * 40);
        color: #fff;
        overflow: hidden;
        font-family: 'Calibri';
        width: calc(100vw / var(--screen) * 287);
        border-radius: calc(100vw / var(--screen) * 20) calc(100vw / var(--screen) * 20) 0px 0px;
        cursor: pointer;

        img {
            height: 100%;
            width: 100%;
            object-fit: cover;
            // position: absolute;
            // top: 50%;
            // left: 50%;
            // transform: translate(-50%, -50%);
            background-color: #fff;
        }
    }
    .title2 {
        background-color: #23445a;
        color: #fff;
        height: calc(100vw / var(--screen) * 190);
        line-height: calc(100vw / var(--screen) * 190);
        font-size: calc(100vw / var(--screen) * 40);
        text-align: center;
        width: calc(100vw / var(--screen) * 285);
        border-radius: calc(100vw / var(--screen) * 20) calc(100vw / var(--screen) * 20) 0px 0px;
        overflow: hidden;
        font-family: 'Calibri';
        position: relative;
        cursor: pointer;
    }
}</style>